<template>
  <div class="main-container">
    <el-container style="height: 100vh; width: 100%;">
      <!-- 顶部导航 -->
      <el-header style="position: fixed; width: 100%; z-index: 1000;">
        <Header />
      </el-header>
      <el-container style="margin-top: 60px;">
        <!-- 左侧边栏（固定宽度，可垂直滚动） -->
        <el-aside width="200px" class="scrollable-aside">
          <Sidebar />
        </el-aside>
        <!-- 主要内容区（可水平和垂直滚动） -->
        <el-main class="scrollable-main">
          <MainContent />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import Sidebar from '/src/components/Sidebar.vue'
import Header from '/src/components/Header.vue'
import MainContent from '/src/components/MainContent.vue'
</script>

<style scoped>
/* 全局滚动条样式 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 侧边栏滚动区域 */
.scrollable-aside {
  height: calc(100vh - 60px);
  overflow-y: auto;
  overflow-x: hidden;
  position: fixed;
  left: 0;
}

/* 主内容区滚动区域 */
.scrollable-main {
  height: calc(100vh - 60px);
  overflow: auto;
  margin-left: 200px; /* 与侧边栏宽度一致 */
  padding: 20px;
  background: #f5f7fa;
}
</style>